<template>
	<view>
		<u-sticky bgColor="#fff">
			<u-tabs :list="navArr" @click="navClick"></u-tabs>
		</u-sticky>

		<view class="content">
			<div class="row" v-for="item in newsArr" :key="item.id">
				<newsbox :item="item" @click.native="goDetail(item)"></newsbox>
			</div>
		</view>

		<view class="nodata" v-if="!newsArr.length">
			<image src="../../static/image/nodata.png" mode="widthFix"></image>
		</view>

		<view class="loading" v-if="newsArr.length">
			<view v-if="loading==1">数据加载中...</view>
			<view v-if="loading==2">没有更多了~~</view>
		</view>
	</view>
</template>

<script>
	export default {
		computed: {
			navArr() {
				return this.originNavArr.map(item => ({
					id: item.id,
					name: item.classname
				}));
			}
		},
		data() {
			return {
				navIndex: 0,
				originNavArr: [],
				newsArr: [],
				currentPage: 1,
				currentId: 50,
				loading: 0 //0默认  1加载中  2没有更多了

			}

		},
		onLoad() {
			this.getNavData();
			this.getNewsData();
		},
		onReachBottom() {
			console.log("到底部了")
			if (this.loading == 2) {
				return;
			}
			this.currentPage++;
			this.loading = 1;
			this.getNewsData();
		},
		methods: {
			navClick(item) {
				this.navIndex = item.index;
				this.currentPage = 1;
				this.currentId = item.id;
				this.newsArr = []
				this.loading = 0;
				this.getNewsData();
				console.log('item', item);
			},

			//获取导航列表数据
			getNavData() {
				uni.request({
					url: "https://ku.qingnian8.com/dataApi/news/navlist.php",
					success: res => {
						console.log(res)
						this.originNavArr = res.data
					}
				})
			},
			//跳转到详情页
			goDetail(item) {
				uni.navigateTo({
					url: `/pages/detail/detail?cid=${item.classid}&id=${item.id}`
				})
			},

			//获取新闻列表数据
			getNewsData() {
				uni.request({
					url: "https://ku.qingnian8.com/dataApi/news/newslist.php",
					data: {
						cid: this.currentId,
						page: this.currentPage
					},
					success: res => {
						console.log(res)
						if (res.data.length == 0) {
							this.loading = 2
						}
						this.newsArr = [...this.newsArr, ...res.data]
					}
				})
			}


		}
	}
</script>

<style scoped lang="scss">
	.content {
		padding: 30rpx;

		// padding-top:130rpx;	
		.row {
			border-bottom: 1px dotted #efefef;
			padding: 20rpx 0;
		}
	}

	.nodata {
		display: flex;
		justify-content: center;

		image {
			width: 360rpx;
		}
	}

	.loading {
		text-align: center;
		font-size: 26rpx;
		color: #888;
		line-height: 2em;
	}
</style>